html,body {
    width:100%;
    height:100%;
    position: relative;
    margin: 0 auto;

}
/*bones*/
div#bones {
	animation: slowDown 4s linear forwards;
}


@keyframes slowDown {
	from {
		transform: translateY(-300px);
	}
	to {
		transform: translateY(0px);
	}
}

div#bone1 {
	position: absolute;
	left: 2em;
    animation: lineAnimation 4s ease-in-out infinite;
}

div#bone1 div#line1 {
	height: 6em;
	width: 2px;
	margin: 0 auto;
	background-color: saddlebrown;


}

div#bone1 div#bone1Img img {

	width: 2em;

	animation-name: hideToShow,boneAnimation;
	animation-duration: 4s,4s;
	animation-delay: 0s,0s;
	animation-iteration-count: 1,infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;

}
div#bone2 {
    position: absolute;
    right: 2em;
    animation: lineAnimation 4s -2.6s ease-in-out infinite;
}

div#bone2 div#line2 {
    height: 6em;
    width: 2px;
    margin: 0 auto;
    background-color: saddlebrown;


}

div#bone2 div#bone2Img img {

    width: 2em;

    animation-name: hideToShow,boneAnimation;
    animation-duration: 4s,4s;
    animation-delay: 0s,-2.6s;
    animation-iteration-count: 1,infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;

}
div#bone3 {
    position: absolute;
    left: 5em;
    animation: lineAnimation 4s -1s ease-in-out infinite;
}

div#bone3 div#line3 {
    height: 6em;
    width: 2px;
    margin: 0 auto;
    background-color: saddlebrown;


}

div#bone3 div#bone3Img img {

    width: 1.5em;

    animation-name: hideToShow,boneAnimation;
    animation-duration: 4s,4s;
    animation-delay: 0s,-1s;
    animation-iteration-count: 1,infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;

}
div#bone4 {
    position: absolute;
    right: 5em;
    animation: lineAnimation 4s -1s ease-in-out infinite;
}

div#bone4 div#line4 {
    height: 6em;
    width: 2px;
    margin: 0 auto;
    background-color: saddlebrown;


}

div#bone4 div#bone4Img img {

    width: 1.5em;

    animation-name: hideToShow,boneAnimation;
    animation-duration: 4s,4s;
    animation-delay: 0s,-1s;
    animation-iteration-count: 1,infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;

}

@keyframes hideToShow {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes lineAnimation
{
	from,to,5% {
		transform: rotate(45deg);
		transform-origin:50% 0%;
	}
	50%,55% {
		transform: rotate(-45deg);
		transform-origin:50% 0%;
	}
	
}

@keyframes boneAnimation
{
	from ,to {
		transform: rotate(35deg);
		transform-origin:50% 0%;
	}
	50% {
		transform: rotate(-35deg);
		transform-origin:50% 0%;
	}
}


/*text*/
div#text {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: 3em;
    text-align: center;

    color: white;
}
div#circleYellow {
    width: 10em;
    height: 10em;
    border-radius: 10em;
    background-color: rgb(252,204,104);
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: -1;

    animation: turnRound 2.5s forwards ease-in;

}
@keyframes turnRound {
    from {
        transform: rotate(0deg) scale(1,1) translate(-50%, -50%);
        transform-origin: 4% 3%;
        opacity: 1;
    }
    to {
        transform: rotate(1000deg) scale(1,1) translate(-50%, -50%);
        transform-origin: 3% 4%;
        opacity: 0;
    }

}



/*bigDog*/
div#bigDog {
    width: 50%;
    margin: 0 auto;
}
div#bigDog img {
    position: absolute;
    bottom: -50%;
    width: 50%;
    z-index: -2;
    animation:1.5s showBigDog 4.5s 1 forwards;
    /*animation:1.5s showBigDog 1 forwards;*/
}

@keyframes showBigDog {
    from {
        transform: translateY(0px) scale(0.2, 0.2);
        bottom:-50%;
    }
    70% {
        transform: scale(0.6, 0.6);
        bottom:25%;
    }
    to {
        transform: scale(1, 1);
        bottom:5%;
    }
}
div#fallBone {
    width: 3em;
    margin: 0 auto;
}
div#fallBone img{
    position: absolute;
    bottom: 110%;

    width: 2em;
    animation: fallBone 2.0s 4.5s linear forwards;
}
@keyframes fallBone {
    from {
        transform: rotate(0deg);
        bottom:100%;
    }
    70% {
        transform: rotate(280deg);
        bottom:5%;
    }
    80% {
        transform: rotate(260deg);
        bottom:5%;
    }
    90% {
        transform: rotate(275deg);
        bottom:5%;
    }
    to {
        transform: rotate(265deg);
        bottom:5%;
    }
}

div#circleYellow2 {
    width: 11em;
    height: 11em;
    border-radius: 11em;
    background-color: rgb(252,204,104);

    position: absolute;
    top: 15%;
    left: 50%;
    opacity: 0;
    z-index: -2;

    animation: turnRoundShow 2.5s 6s forwards ease-in;
}
@keyframes turnRoundShow {
    from {
        transform: rotate(0deg) scale(1,1) translateX(-50%);
        transform-origin: 1% 52%;
        opacity: 0;
    }
    to {
        transform: rotate(1000deg) scale(1,1) translateX(-50%);
        transform-origin: 2% 51%;
        opacity: 1;
    }

}
div#logo1 {
    width: 50%;
    margin: 0 auto;
}
div#logo1 img {
    position: absolute;
    top:20%;
    width: 50%;

    z-index: -1;
    transform: scale(0,0);
    animation: showLogo 0.5s 7.5s linear forwards;
}
@keyframes showLogo {
    from {
        transform: scale(0,0);
    }
    to {
        transform: scale(1,1);
    }
}
div#logo2 {
    width: 50%;
    margin: 0 auto;
}
div#logo2 img {
    position: absolute;
    top: 33%;
    width: 50%;

    z-index: -1;
    transform: scale(0,0);
    animation: showLogo 0.5s 8s linear forwards;
}
div#logo3 {
    width: 50%;
    margin: 0 auto;
}
div#logo3 img {
    position: absolute;
    top: 50%;
    width: 50%;

    z-index: -1;
    opacity: 0;
    animation: logoHideToShow 0.5s 8.5s linear forwards;
}
@keyframes logoHideToShow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}